<template>
  <el-dialog title="导入结果" :visible="visible" width="1100px" append-to-body @close="$emit('update:visible',false)">
    <el-row :gutter="10" style="margin-bottom: 10px;">
      <el-col :span="12">
        <el-alert :title="`${successNum} 条数据导入成功`" type="success" show-icon />
      </el-col>
      <el-col :span="12">
        <el-alert :title="`${errorNum} 条数据导入失败`" type="error" show-icon />
      </el-col>
    </el-row>
    <el-table :data="assets" :row-class-name="tableRowClassName" height="500" border>
      <el-table-column label="详情" align="center" prop="describe" min-width="350" />
      <el-table-column label="资产名称" align="center" prop="assetName" min-width="250" />
      <el-table-column label="资产编码" align="center" prop="assetCode" width="220"/>
      <el-table-column label="数量" align="center" prop="number" min-width="90" />
      <el-table-column label="原值" align="center" prop="originalValue" min-width="100" />
      <el-table-column label="取得日期" align="center" prop="acquisitionDate" width="150"></el-table-column>
      <el-table-column label="使用部门" align="center" prop="deptName" min-width="150" />
      <el-table-column label="使用人" align="center" prop="nickName" min-width="150" />
      <el-table-column label="存放地点" align="center" prop="storagePlace" min-width="150" />
    </el-table>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible', 'data'],
    data() {
      return {
        successNum: 0,
        errorNum: 0,
        assets: [],
      }
    },
    watch: {
      visible(val) {
        if (val) {
          this.successNum = 0
          this.errorNum = 0
          this.assets = []
          this.assets = this.data.map(item => {
            if (item.state) this.successNum += 1
            else this.errorNum += 1
            return {...item,...item.assetImportDto}
          })
        }
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (!row.state) {
          return 'error-row';
        } else if (row.state) {
          return 'success-row';
        }
        return '';
      }
    },
  }
</script>

<style lang="scss">
.el-table .error-row {
  background: #ffeded;
}

.el-table .success-row {
  background: #e7faf0;
}
</style>